<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html >
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<style type="text/css">
		#container{
			margin-top:50px;
		}
	</style>
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a href="#" class="brand" style="color:#fff">凯盛项目管理系统</a>
				<div class="nav-collapse">
					<ul class="nav pull-right">
						<li>
							<img src="img/smal.jpg" alt="" style="margin-top:4px"/>
						</li>
						<li >
							<div style="padding-top:10px;padding-left:3px;color:#FFFFFF">${ep.employee.username }</div>
						
						</li>
						<li class="divider-vertical"></li>
						
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								参与项目
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<c:forEach items="${projectList}" var="p">
									<li>
										<a href="project.jspx?m=project&p=${p.id }">${p.name }</a>
									</li>
								</c:forEach>
							</ul>
						</li>
						
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								设置
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li>
									<a href="project.jspx?m=project&p=${p.id }">修改密码</a>
								</li>
								<li>
									<a data-toggle="modal" href="#avatar"">更改头像</a>
								</li>
								<li>
									<a href="project.jspx?m=project&p=${p.id }">修改邮箱</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	<!--上传头像 -->
	<div class="modal hide" id="avatar">
	    <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal">×</button>
		    <h3>更换头像</h3>
	    </div>
	    <div class="modal-body">
	    	<p>One fine body…</p>
	    </div>
	    <div class="modal-footer">
		    <a href="#" class="btn" data-dismiss="modal">取消</a>
		    <a href="#" class="btn btn-primary">确定</a>
	    </div>
    </div>
	
	<div class="container" id="container">
		<div class="row">
			<jsp:include page="include/side.jsp">
				<jsp:param value="new" name="tag"/>
			</jsp:include>

			<div class="span6">
				<ul class="breadcrumb" style="margin-bottom:0px;border-radius:3px 3px 0 0;">
					<li><i class="icon-th"></i>你在想什么？</li>
				</ul>
				<div class="wall">
					<form style="padding-left:15px;margin:0px;padding:0px" id = "myform" action="project.jspx?m=project&p=${ep.projectid }" method="post">
						<textarea data-provide="typeahead"  name="content" id="content" style="width:415px;margin-top:15px" rows="3"></textarea>
						<input  id = "message" type="hidden" name="employee"/>
						<button class="btn btn-primary" id="fabu" type="button">发布</button>
					</form>
				</div>
				
				<ul class="nav nav-tabs" id="myTab" style="margin-top:10px;margin-bottom:0px;">
					<li class="active"><a href="#home"><i class=" icon-th"></i>信息流</a></li>
					<li><a href="#settings">@我的</a></li>
				</ul>
				 
				<div class="tab-content wall" >
				<div class="tab-pane active" id="home">
					<c:forEach items="${messageList }" var = "m">
						<blockquote >
							<div class="row">
								<div class="span1" style="width:32px">
									<img alt="" src="img/smal.jpg" style="margin-top:3px;">
								</div>
								<div class="span4" style="width:350px;margin-left:5px">
									<span style="margin-left:5px;">
										<a href="#">${m.employee.username }</a>:&nbsp;${m.content }
										<small >发布于 ${m.interval}</small>
										
											<a    href="project.jspx?m=project&p=${ep.projectid }&cid=${m.id }" class="pull-right">
												<c:choose>
													<c:when test="${m.count == 0 }">
														评论
													</c:when>
													<c:otherwise>
														评论(${m.count })
													</c:otherwise>
												</c:choose>
										    	
										    </a>
											<c:if test="${messageid eq m.id}">
												<div class="well pull-right">
										    		<c:set var="count" >0</c:set>
											    	<form action="project.jspx?m=addMessageComment&id=${m.id } " method="post">
											    		<textarea name="content" id=""  rows="1" style="width:270px;margin-bottom:3px;"></textarea>
														<button type="submit" class="btn btn-success btn-mini" style="margin-left:240px;">评论</button>
													</form>
													
													
													<c:forEach items="${commentList }" var="mc">
														
														<blockquote>
															<div class="row">
																<div class="span1" style="width:32px">
																	<img alt="" src="img/smal.jpg" style="margin-top:3px;">
																</div>
																			
																<div class="span3" style="width:200px;margin-left:5px">
																	<span style="margin-left:5px;">
																		<a href="#">${mc.employee.username }</a>:${mc.content }(${mc.createtime })
																	</span>
																</div>
															</div>
														</blockquote>
													
													</c:forEach>
						 						</div>
											
											</c:if>
										    	
									</span>
								</div>
							</div>
						</blockquote>
						<hr/>
					</c:forEach>
					
										 
				</div>
				<div class="tab-pane" id="settings">
					<c:forEach items="${myList}" var = "my">
						<blockquote >
							<div class="row">
								<div class="span1" style="width:32px">
									<img alt="" src="img/smal.jpg" style="margin-top:3px;">
								</div>
											
								<div class="span4" style="width:320px;margin-left:5px">
									<span style="margin-left:5px;">
										<a href="#">${my.message.employee.username}</a>:${my.message.content }
										<small >发布于 ${my.message.interval}</small>
										
									</span>
								</div>
							</div>
						</blockquote>
					</c:forEach>
				</div>
			</div>
			
			</div>
			<div class="span3">
				<div class="box" style="border:1px solid #ccc">
				<div class="head" style="padding-left:10px;padding-top:5px;border-bottom:1px solid #ccc "><strong>我的任务</strong></div>
					<ul >
						<li><a href=""></a>任务1</li>
						<li><a href=""></a>任务1</li>
						<li><a href=""></a>任务1</li>
					</ul>
				</div>
			</div>
		 </div>
	</div>
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		
			//获得typeahead
			var subjects = [${name}]; 
			$("#content").typeahead({source : subjects});
			
			//显示提示信息
		    $("#contact").popover("hide");
			
			//过滤@我的人
			$("#fabu").click(function(){
				var v = $("#content").val();
				
				var reg = /@(\w+|[\u4E00-\u9FA5\uF900-\uFA2D]+)\s/g;//英文、中文、日文、韩文都可以
				var s = v.match(reg);
			
			//信息流和@我的之间的切换	
			$("#message").val(s);
				$("#myform").submit();
			});
			
			$('#myTab a:first').click(function(){
				$(this).tab("show");
			});
			
			$('#myTab a:last').click(function(){
				$(this).tab("show");
			});
			
		});
	
	</script>
</body>
</html>